<script setup>
import { onMounted, ref } from 'vue';
import { BLOKS, Game, Platform, Player } from '../game/Game';
import { changePage } from '../tools/linkTo';

const gamemap = JSON.parse(localStorage.getItem("mapdata"))



/**
 * 设置游戏地图
 * @param game {Game}
 */
const setMap = (game) => {
    const level = localStorage.getItem("level") || 0
    gamemap[level].forEach((i, y) => i.forEach((j, x) => {
        if (j !== 0) {
            if (j == BLOKS.SPAWN) {
                game.setPlayer(x * 50, y * 50-20)
            }
            const pingtai = new Platform(x * 50, y * 50, j)
            game.addPlatform(pingtai)
        }
    }));
}

onMounted(() => {
    /** @type {HTMLCanvasElement} */
    const canvas = document.getElementById("game")
    canvas.width = 1000
    canvas.height = 600
    canvas.style.border = "1px solid black"

    const player = new Player()
    const game = new Game(canvas)
    game.addPlayer(player)
    setMap(game)
    game.startGame()
})

</script>

<template>
    <div>
        <div class="back" @click="changePage('mapEditor')">Back TO Edit</div>
        <canvas id="game"></canvas>
    </div>
</template>

<style scoped>
.back{
    color: #666;
    padding: 20px;
    cursor: pointer;
}
.back:hover{
    color: black;
}
#game{
    margin: 0 auto;
}
</style>
